import { defineComponent } from "vue";
import useData from "./use/useData.ts";

import IpChart from "./components/IpChart.tsx";
import IpData from "./components/IpData.tsx";

const App = defineComponent({
  setup() {
    const { dataIpCount, dataIP } = useData();

    const handelClick = () => {
      console.log(123);
    };

    return () =>
      dataIP?.value ? (
        <div class="bg-white text-center bg-cover bg-center h-screen text-white p-2 flex">
          <div class="w-full  flex flex-col">
            {/* <!-- 数据展示图 --> */}
            <IpData data={dataIpCount?.value} />
            {/* <!-- IP检测list --> */}
            <IpChart
              class="bg-opacity-100 bg-slate-300  mt-2 flex-1 "
              data={dataIP?.value}
            />
          </div>
        </div>
      ) : (
        <h1 class={"text-center"}>数据加载中。。。</h1>
      );
  },
});

export default App;
